<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>gse 中文分词演示</title>
    <style>
        .left {
            float: left;
        }
        
        textarea {
            border-radius: 3px;
        }
        
        #text {
            font-size: 13px;
        }
        
        #btn {
            margin: 10% 10px;
        }
    </style>
</head>

<body>
    <h2>gse 中文分词演示</h2>
    <div class="left" width=100px>
        <textarea id="text" rows="30" cols="60">
            2017年1月23日正式开机，导演罗素兄弟从社交网站上发布过一些在亚特兰大取景筹备的零星照片，主要以亚特兰大片场为主要拍摄地，期间还会前往伦敦取景 。
        《复仇者联盟3：无限战争》是全片使用IMAX摄影机拍摄，在IMAX影院放映时，全片以上下扩展至IMAX 1.9：1的宽高比来呈现。参与影片特效制作的公司，包括工业光魔、维塔工作室、双重否定（DNEG）、Method Studios、Framestore、Cinesite、数字王国、RISE等等
        </textarea>
    </div>
    <div class="left" id="btn">
        <br>&nbsp;
        <button type="button" onclick="Segment()">分词 =></button>&nbsp;
    </div>
    <div class="left" width=100px>
        <textarea id="output" rows="30" cols="60" disabled></textarea>
    </div>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
    Segment = function() {
        var input = $('textarea#text').val();
        $.ajax({
            url: "/json",
            type: "POST",
            data: {
                text: input
            },
            dataType: "json",
            success: function(result) {
                var out = ""
                var last_word_is_x = false
                for (var i = 0; i < result.segments.length; i++) {
                    var segment = result.segments[i]
                    if (segment.pos == "x") {
                        if (segment.text != "\n") {
                            last_word_is_x = true
                        } else {
                            last_word_is_x = false
                        }

                        out += segment.text
                    } else {
                        if (last_word_is_x) {
                            out += " "
                        }
                        out += segment.text + "/" + segment.pos + " "
                    }
                }
                $('textarea#output').html(out);
            },
            error: function(xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            }
        });
    };
</script>

</html>